import React, { useState, useEffect } from 'react'
import { InfiniteScroll, List, Card } from 'antd-mobile'
import TopTabs from '../../components/TopTabs'
import LotteryBall from '../../components/LotteryBall'
import { getFourNumbers } from '../../data/sortFiveUtils'
import { useStore4Tabs, useStore4SortFiveData, useStore4SevenStarData } from '../../store'
import { TAB_KEY_SORT_FIVE, TAB_KEY_SEVEN_STAR } from '../../constants/index'
import './index.less'

const BallResult = (props) => {
    const { numbers = [] } = props
    const key = useStore4Tabs(state => state.key)

    let color = ''
    if (key == TAB_KEY_SORT_FIVE) { // 排列五
        color = 'red'
    }
    if (key == TAB_KEY_SEVEN_STAR) { // 七星彩
        color = 'purple'
    }

    return (
        <div className='record-ball-wrapper'>
            {numbers.map((ball, index) => <LotteryBall key={`ball_${index}`} color={color}>{ball}</LotteryBall>)}
        </div>
    )
}

const LotteryItem = (props) => {
    const { item } = props

    return (
        <>
            {
                item ?
                    <div className='lottery-item'>
                        <div>
                            <div className='record-peroid-date'>{item.lotteryDrawTime}</div>
                            <div className='record-peroid-num'>第{item.lotteryDrawNum}期</div>
                        </div>
                        <BallResult numbers={item.lotteryDrawResult.split(' ')} />
                        {/* <div className='balance'>{item.poolBalanceAfterdraw}</div> */}
                    </div>
                    :
                    <div className='lottery-item title'>
                        <div className='peroid-num'>期数</div>
                        <div>号码</div>
                        {/* <div className='balance'>奖池</div> */}
                    </div>
            }
        </>
    )
}

function PageRecord() {

    const key = useStore4Tabs(state => state.key)
    const sortFiveData = useStore4SortFiveData(state => state.sortFiveData)
    const sevenStarData = useStore4SevenStarData(state => state.sevenStarData)

    const [hasMore, setHasMore] = useState(true)
    const [dataList, setDataList] = useState()

    async function loadMore() {
        setTimeout(() => {
            setHasMore(false)
        }, 1500)
    }

    useEffect(() => {
        setDataList(null)
        setHasMore(true)

        setTimeout(() => {
            if (key == TAB_KEY_SORT_FIVE) { // 排列五
                setDataList(sortFiveData)
            }
            if (key == TAB_KEY_SEVEN_STAR) { // 七星彩
                setDataList(sevenStarData)
            }
            setHasMore(false)
        })

    }, [key])

    return (
        <>
            <TopTabs />
            <Card title="开奖结果" className="card-margin-top">
                <List>
                    <List.Item>
                        <LotteryItem />
                    </List.Item>
                    {dataList && dataList.list.map(item => (
                        <List.Item key={item.lotteryDrawNum}>
                            <LotteryItem item={item} />
                        </List.Item>
                    ))}
                </List>
                <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </Card>
        </>
    )
}

export default PageRecord